<script setup>

import { ref } from 'vue';

// ref 创建一个响应式数据 ，ref 功能更强大，支持 基本类型 和 引用类型（对象，数组）
// ref 返回的是响应式数据<对象> ，对象中有 value 属性，用来 获取/修改 响应式数据的值
const totalCount = ref(100)

const arr = ref(['张三','李四'])

const addPerson = ()=>{
  arr.value.push('王五')
}


const addCount = ()=>{
  totalCount.value += 10
}
</script>

<template>
  <!-- 结构 template中会自动解包，所以无需写 .value -->
  <h1>{{ totalCount }}</h1>
  <button @click="totalCount++">+ 1</button>
  <button @click="totalCount = totalCount + 10">+ 10</button>
  <button @click="addCount">点击调用函数</button>
  <h2>{{ arr }}</h2>
  <button @click="arr.push('赵六')">点击加入</button>
  <button @click="addPerson">点击调用函数</button>
</template>

<style>
</style>
